<template>
  <div class="my-container">
    <!-- 顶部背景图和个人头像 -->
    <userInfo :nickName="nickName" :avatar="avatar" :credit="credict"></userInfo>
    <!-- 钱包余额 -->
    <balance :balance="balance"></balance>
    <!-- 订单 -->
    <orderGroup></orderGroup>
    <!-- 设置 -->
    <setting></setting>

    <!-- 备案信息 -->
    <div class="my-description">Qunar京ICP备05021087</div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { useStore } from "vuex";
import userInfo from "../../components/my/userInfo.vue";
import balance from "../../components/my/balance.vue";
import orderGroup from "../../components/my/orderGroup.vue";
import setting from "../../components/my/setting.vue";
import { getUserInfo } from "../../api/service/user";
import { reactive, toRefs } from "@vue/reactivity";
export default {
  components: {
    userInfo,
    balance,
    orderGroup,
    setting,
  },
  setup() {
    const route = useRoute();
    const store = useStore();
    const state = reactive({
      userInfos: null,
      nickName: null,
      avatar: null,
      credict: null,
      balance: null,
    });
    onMounted(() => {
      // console.log('query传递的参数',route.query.userID)
      
      // console.log('父',store.state)
        getUserInfo({ userID: route.query.userID }).then((res) => {
          console.log("用户接口返回的信息", res);
          state.userInfos = res.data;
          state.nickName = res.data.nickname;
          state.avatar = res.data.avatar;
          state.credict = res.data.credit;
          state.balance = res.data.balance;
        });
      // console.log('query传递的参数',route.query.userID)
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
.my-container {
  background: #ebeced;
  height: 100vh;
  overflow: hidden;
}
.my-description {
  padding: 0.64rem;
  font-size: 0.4267rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bfbfbf;
}
</style>
